<template>
    <div class="flex bottomBox">
        <div class="boxShadow wifiComponent">
            <el-form ref="ruleForm" class="wifiForm">
                <p class="boldTitle">网络设置</p>
                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">Wifi名称</div>
                        <div class="itemRight"><input type="text" placeholder="请输入Wifi名称" v-model="wifiName"></div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">Wifi密码</div>
                        <div class="itemRight"><input type="text" placeholder="请输入Wifi密码" v-model="wifiPsw"></div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">IP</div>
                        <div class="itemRight"><input type="text" placeholder="请输入IP" v-model="wifiIp"></div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">子掩码</div>
                        <div class="itemRight"><input type="text" placeholder="请输入子掩码" v-model="ipMask"></div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">网关</div>
                        <div class="itemRight"><input type="text" placeholder="请输入网关" v-model="gateway"></div>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="flex formItem">
                        <div class="itemLeft">保存设置</div>
                        <div class="itemRight saveSetting"><el-checkbox v-model="checked"></el-checkbox></div>
                    </div>
                </el-form-item>


                <div class="flex formBtns">
                    <el-button size="small" @click="resetForm('ruleForm')">复位</el-button>
                    <el-button size="small" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import { subWifiSet, wifiRest } from '../js/methods'
export default {
    name: 'wifiSetting',
    components:{

    },
    data(){
        return{
            wifiName: '',
            wifiPsw:'',
            wifiIp:'',
            ipMask:'255.255.255.0',
            gateway:'',
            checked: true
        }
    },
    methods:{
        //提交
        submitForm(formName) {
            const that = this;
            let options = {
                ssid:that.wifiName,
                password: that.wifiPsw,
                ip: that.wifiIp,
                mask: that.ipMask,
                gateway: that.gateway,
                checked: that.checked
            }
            subWifiSet(options)
        },

        //复位
        resetForm() {
            wifiRest({})
        }
    },
    mounted(){
        
    },

    //属性监听,判断是否有缓存wifi数据
    watch:{
       '$store.state.wifiInfos':function(val){
            let infos = JSON.parse(val);
            this.wifiName = infos.ssid;
            this.wifiPsw = infos.password;
            this.wifiIp = infos.ip;
            this.mask = infos.mask;
            this.gateway = infos.gateway;
            this.checked = infos.checked
       }
    }

}
</script>

<style scoped lang="less">
 .wifiComponent{
     background-color: #ffffff;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: 10px;
     text-align: left;
     font-size: 14px;
     width: 100%;
 }
 .boldTitle{
     font-weight: bold;
     margin-bottom: 7.5px;
 }
 .formItem{
    padding: 10px 0;
     border-bottom: 1px solid #eeeeee;
    .itemLeft{
        flex: 3
    }
    .itemRight{
        flex: 7;
        input{
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .saveSetting{
        margin-left: 1em
    }
 }
 .formBtns{
     padding: 0 5px;
     margin-top: 15px;
     justify-content: space-between;
     button{
         width: 40%;
     }
 }
 .el-form-item{
     margin-bottom: 0;
 }
 .wifiForm div{
    line-height:normal;
 }
 
  .el-form-item__content{
        line-height: 20px;
    }
</style>